<template>
  <div class="wrap">
    <!-- 顶部结构 -->
    <div class="top">
        <div class="hosname">{{workData.baseMap?.hosname}}</div>
        <div class="line"></div>
        <div>{{workData.baseMap?.bigname}}</div>
        <div class="dot">.</div>
        <div class="hosdeparment">{{workData.baseMap?.depname}}</div>
    </div>
    <!-- 中间展示日期的结构 -->
    <div class="center">
        <h1 class="time">{{workData.baseMap?.workDateString}}</h1>
        <div class="container">
            <div class="item" :class="{active:item.status==-1||item.availableNumber==-1,cur:item.workDate==workTime.workDate}" v-for="item in workData.bookingScheduleList" :key="item" @click="changeTime(item)">
                <div class="top1">{{item.workDate}}-{{item.dayOfWeek}}</div>
                <div class="bottom">
                    <div v-if="item.status==-1">停止挂号</div>
                    <div v-if="item.status==0">
                        {{item.availableNumber==-1?'约满了':`有号(${item.availableNumber})`}}
                    </div>
                    <div v-if="item.status==1">
                        即将放号
                    </div>
                </div>
            </div>
        </div>
         <el-pagination v-model:current-page="pageNo" layout="prev, pager, next" :total="workData.total" @current-change="fetchWorkData"/>
    </div>
    <!-- 底部展示医生的结构 -->
    <div class="bottom">
        <!-- 展示即将放号的时间 -->
        <div class="will" v-if="workTime.status==1">
            <span class="time">2023年5月30日08：30</span>
            <span class="willText">放号</span>
        </div>
        <!-- 展示医生的结构：上午、下午 -->
        <div class="doctor" v-else-if="workTime.availableNumber!==-1&&workTime.status!=-1">
            <div class="moring" v-show="moringArr.length!=0">
                <div class="tip">
                    <svg t="1694872533078" class="icon" viewBox="0 0 1267 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5357" width="16" height="16"><path d="M1243.428571 853.333333H24.380952c-19.017143 0-24.380952-21.942857-24.380952-41.447619S5.36381 780.190476 24.380952 780.190476h219.428572c17.968762-197.485714 188.294095-365.714286 390.095238-365.714286s372.126476 168.228571 390.095238 365.714286h219.428571c19.017143 0 24.380952 12.190476 24.380953 31.695238s-5.339429 41.447619-24.380953 41.447619zM633.904762 487.619048c-162.694095 0-298.983619 134.095238-316.952381 292.571428h633.904762c-17.968762-158.47619-154.258286-292.571429-316.952381-292.571428z m443.733333 29.257142a36.571429 36.571429 0 0 1-49.639619 0 39.326476 39.326476 0 0 1-10.313143-24.380952 40.399238 40.399238 0 0 1 10.313143-26.819048l163.742476-163.35238a33.596952 33.596952 0 0 1 49.664 0 33.987048 33.987048 0 0 1 0 48.761904zM621.714286 341.333333a35.05981 35.05981 0 0 1-36.400762-34.133333V34.133333a36.571429 36.571429 0 0 1 72.777143 0v273.066667A35.05981 35.05981 0 0 1 621.714286 341.333333zM190.171429 516.87619l-163.766858-165.790476a30.695619 30.695619 0 0 1-10.313142-24.380952 34.57219 34.57219 0 0 1 10.313142-24.380952 33.572571 33.572571 0 0 1 49.664 0l163.742477 163.35238a36.937143 36.937143 0 0 1 0 51.2 38.253714 38.253714 0 0 1-49.639619 0zM243.809524 950.857143h780.190476a36.790857 36.790857 0 0 1-3.413333 73.142857H246.247619a35.864381 35.864381 0 0 1-34.864762-34.133333A36.766476 36.766476 0 0 1 243.809524 950.857143z" fill="#1296db" p-id="5358"></path></svg>
                    <span class="text">上午号源</span>
                </div>
                <!-- 每一个医生的信息 -->
                <div class="doc_info" v-for="doctor in moringArr" :key="doctor.id">
                    <!-- 展示医生的名字|技能 -->
                    <div class="left">
                        <div class="info">
                            <span>{{doctor.title}}</span>
                            <span></span>
                            <span>{{doctor.docname}}</span>
                        </div>
                        <div class="skill">{{doctor.skill}}</div>
                    </div>
                    <!-- 右侧区域展示挂号的钱数 -->
                    <div class="right">
                        <div class="money">￥{{doctor.amount}}</div>
                        <el-button type="primary" size="default" @click="goStep2(doctor)">{{doctor.availableNumber}}</el-button>
                    </div>
                </div>
            </div>
            <div class="moring" v-show="afterArr.length!=0">
                <div class="tip">
                  <svg t="1694943352130" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4338" width="16" height="16"><path d="M166.4 712.533c-17.067-17.066-17.067-42.666 0-59.733l59.733-59.733C243.2 576 268.8 576 285.867 593.067c17.066 17.066 17.066 42.666 0 59.733l-59.734 59.733c-17.066 17.067-42.666 17.067-59.733 0z m691.2 0c-17.067 17.067-42.667 17.067-59.733 0L738.133 652.8c-17.066-17.067-17.066-42.667 0-59.733C755.2 576 780.8 576 797.867 593.067L857.6 652.8c17.067 17.067 17.067 42.667 0 59.733zM512 896c-25.6 0-42.667-17.067-42.667-42.667V768c0-25.6 17.067-42.667 42.667-42.667S554.667 742.4 554.667 768v85.333C554.667 878.933 537.6 896 512 896z m128-640H384c-25.6 0-42.667-17.067-42.667-42.667S358.4 170.667 384 170.667h256c25.6 0 42.667 17.066 42.667 42.666S665.6 256 640 256z m42.667 170.667H341.333c0 93.866 76.8 170.666 170.667 170.666s170.667-76.8 170.667-170.666z m85.333 0c0 140.8-115.2 256-256 256s-256-115.2-256-256H128c-25.6 0-42.667-17.067-42.667-42.667S102.4 341.333 128 341.333h768c25.6 0 42.667 17.067 42.667 42.667S921.6 426.667 896 426.667H768z" p-id="4339" fill="#1296db"></path></svg>
                    <span  class="text">下午号源</span>
                </div>
                <!-- 每一个医生的信息 -->
                <div class="doc_info" v-for="doctor in afterArr" :key="doctor.id">
                    <!-- 展示医生的名字|技能 -->
                    <div class="left">
                        <div class="info">
                            <span>{{doctor.title}}</span>
                            <span></span>
                            <span>{{doctor.docname}}</span>
                        </div>
                        <div class="skill">{{doctor.skill}}</div>
                    </div>
                    <!-- 右侧区域展示挂号的钱数 -->
                    <div class="right">
                        <div class="money">￥{{doctor.amount}}</div>
                        <el-button type="primary" size="default" @click="goStep2(doctor)">{{doctor.availableNumber}}</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import {onMounted,ref,computed} from 'vue';
import {reqHospitalWork,reqHospitalDoctor} from '@/api/hospital/index';
import {useRoute,useRouter} from "vue-router";
import type {Doctor,DocArr,HospitalWordData,DoctorResponseData} from '@/api/hospital/type';
// 获取路由对象
let $route=useRoute();
// 获取路由器
let $router=useRouter();
// 分页器当前页码
let pageNo=ref<number>(1);
// 每一页展示几条数据
let limit=ref<number>(6);
// 存储医院科室挂号的数据
let workData=ref<any>({});
// 存储排班日期：当前数据的第一个
let workTime:any=ref({});
// 存储排班医生的数据
let docArr=ref<DocArr>([]);

// 组件挂载完毕发一次请求
onMounted(()=>{
    // 获取挂号的数据
    fetchWorkData();
});
// 获取挂号的数据
const fetchWorkData=async()=>{
  let result:HospitalWordData=await  reqHospitalWork(pageNo.value,limit.value,$route.query.hoscode,$route.query.depcode as string);
  console.log(result);
    if(result.code==200){
        workData.value=result.data;
        // 存储第一天日期的数据
        workTime.value=workData.value.bookingScheduleList[0];
        // console.log(workTime._rawValue.status!==-1&&workTime._rawValue.availableNumber===-1);
        
        // if(workTime._rawValue.status!==-1&&workTime._rawValue.status!==1&&workTime._rawValue.availableNumber!==-1){
         // 再发一次获取医生排班的数据
          getDoctorWorkData();
        //  }
    }
};
// 获取某一天医生排班的数据
const getDoctorWorkData=async()=>{
    // 医院的编号
    let hoscode:string=$route.query.hoscode as string;
    // 科室的编号
    let depcode:string=$route.query.depcode as string;
    // 时间
    let workDate:string=workTime.value.workDate;
    // 获取排班医生的数据
   let result:DoctorResponseData=await reqHospitalDoctor(hoscode,depcode,workDate);
//    console.log(result);
    if(result.code==200){
        docArr.value=result.data;
    }
   
};
// 点击顶部某一天的时候触发回调
const changeTime =(item:any)=>{
    // 存储用户选择哪一天的数据
    workTime.value=item;
    console.log(item.status!==-1&&item.status!==1&&item.availableNumber!==-1);
    
    // if(item.status!==-1&&item.status!==1&&item.availableNumber!==-1){
         // 再发一次获取医生排班的数据
        getDoctorWorkData();
    // }
   
}

// 计算出上午排班的医生数据
let moringArr=computed(()=>{
    return docArr.value.filter((doc:Doctor)=>{
        return doc.workTime==0;
    })
})
// 计算出下午排班的医生的数据
let afterArr=computed(()=>{
    return docArr.value.filter((doc:Doctor)=>{
        return doc.workTime==1;
    })
})

// 路由跳转进入到选择就诊人页面
const goStep2=(doctor:Doctor)=>{
    // 编程式导航进行路由跳转且携带医生的ID
    $router.push({
        path:"/hospital/register_step2",query:{docId:doctor.id}
    })
};
</script>
<style scoped lang='scss'>
.wrap{
    .top{
        display: flex;
        color: #7f7f7f;
        .line{
            width:5px;
            height: 20px;
            background:skyblue;
            margin:0px 5px;
        }
    }
    .center{
        margin:20px 0px;
        display: flex;
        flex-direction: column;
        align-items:center;
        .time{
            font-weight: 900;
        }
        .container{
            margin:30px 0;
            width:100%;
            display: flex;
            .item{
                flex:1;
                width:100%;
                border:1px solid skyblue;
                margin:0px 5px;
                transition:all 0.3s;
                &.active{
                    border:1px solid #ccc;
                    color: #7f7f7f;
                    .top1{
                        background: #ccc;
                    }
                }
                &.cur{
                    transform:scale(1.1);
                    border:2px solid #1eaffb;
                }
                .top1{
                    background: #e8f2ff;
                    height: 30px;
                    width:100%;
                    text-align: center;
                    line-height: 30px;
                }
                .bottom{
                    width:100%;
                    height: 60px;
                    text-align: center;
                    line-height: 60px;
                }
            }
        }
    }
    .bottom{
        .will{
            text-align: center;
            font-size: 30px;
            font-weight:900;
            .time{
                color:red;
            }
            .willText{
                color:#1eaffb;
            }
        }
        .doctor{
            .moring{
                .tip{
                    display: flex;
                    align-items: center;
                    .text{
                        color:#7f7f7f;
                        font-weight: 900;
                    }
                }
                .doc_info{
                    display: flex;
                    justify-content: space-between;
                    margin:10px 0px;
                    border-bottom: 1px solid #ccc;
                    .left{
                        .info{
                            color:skyblue;
                            margin:10px 0px;
                            span{
                                margin:0px 5px;
                                font-size: 18px;
                                font-weight: 900;
                            }
                        }
                        .skill{
                            margin:10px 0px;
                            color:#7f7f7f;
                        }
                    }
                    .right{
                        width:150px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .money{
                            color:#7f7f7f;
                            font-weight: 900;
                        }
                    }
                }
            }
        }
    }

}
</style>